<template>
	<image class="ai-customer"
		src="https://erised-fresh.oss-cn-shenzhen.aliyuncs.com/592800/X03tuqr5Agd10138d73deac99c09ed1219c2df37c11a.png"
		:style="{ right: right + 'rpx', bottom: bottom + 'rpx' }" @touchstart.stop="touchStart"
		@touchmove.stop="touchMove" @touchend.stop="touchEnd">

	</image>
</template>

<script>
export default {
	data() {
		return {
			right: 30,
			bottom: 200,
			isDragging: false,
			startX: 0,
			startY: 0,
			screenWidth: 0,
			screenHeight: 0
		};
	},
	mounted() {
		const systemInfo = uni.getSystemInfoSync();
		this.screenWidth = systemInfo.windowWidth;
		this.screenHeight = systemInfo.windowHeight;
	},
	methods: {
		touchStart(e) {
			this.startX = e.touches[0].clientX;
			this.startY = e.touches[0].clientY;
			this.touchStartTime = Date.now();
			this.hasMoved = false;
		},
		touchMove(e) {
			const currentX = e.touches[0].clientX;
			const currentY = e.touches[0].clientY;
			const deltaX = this.startX - currentX;
			const deltaY = this.startY - currentY;

			// 如果移动距离大于阈值，认为是拖动而不是点击
			if (Math.abs(deltaX) > 10 || Math.abs(deltaY) > 10) {
				this.hasMoved = true;
				this.isDragging = true;

				let newRight = this.right + (deltaX / this.screenWidth) * 750;
				let newBottom = this.bottom + (deltaY / this.screenHeight) * 1334;

				// 确保按钮不会移出屏幕
				newRight = Math.max(0, Math.min(newRight, 750 - 80));
				newBottom = Math.max(0, Math.min(newBottom, 1334 - 80));

				this.right = newRight;
				this.bottom = newBottom;

				this.startX = currentX;
				this.startY = currentY;
			}
		},
		touchEnd(e) {
			const touchEndTime = Date.now();
			const touchDuration = touchEndTime - this.touchStartTime;

			// 如果触摸时间短且没有明显移动，视为点击
			if (touchDuration < 200 && !this.hasMoved) {
				this.toCustomer();
			}

			this.isDragging = false;
		},
		toCustomer() {
			uni.navigateTo({
				url: '/pages/customer/index',
			});
		}
	}
};
</script>

<style>
.ai-customer {
	width: 80rpx;
	height: 80rpx;
	position: fixed;
	z-index: 200;
	bottom: 200rpx;
	right: 30rpx
}
</style>
